<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<link type="text/css" rel="stylesheet" href="css/dth.css" />

	<style>
</style>

</h:head>

<h:body>

	<h:panelGroup id="dlgisert">
		<h:inputHidden value="#{userBean.id}"></h:inputHidden>
		<div class="feild-input">
			<h:outputLabel value="Name"></h:outputLabel>
			<h:inputText value="#{userBean.name}"></h:inputText>
		</div>
		<div class="feild-input">
			<h:outputLabel value="CardNumber"></h:outputLabel>
			<p:inputMask mask="9999999999" value="#{userBean.cardNumber}"
				maxlength="" style="width:200px;">
				<p:ajax event="keyup" update="mess_card"></p:ajax>
			</p:inputMask>

		</div>
		<div class="feild-input">
			<h:outputText id="mess_card" style="margin-left:97px;"
				value="#{userBean.messInvaildCardNumber}"></h:outputText>
		</div>
		<div class="feild-input">
			<h:outputLabel value="ContactNumber">

			</h:outputLabel>
			<h:inputText value="#{userBean.contactNumber}" style="width:200px;">
				<p:ajax event="keyup" update="mess_contact"></p:ajax>
			</h:inputText>
		</div>
		<div class="feild-input">
			<h:outputText id="mess_contact" style="margin-left:97px;"
				value="#{userBean.messInvaildContactNumber}"></h:outputText>
		</div>
		<div class="feild-input">
			<h:outputLabel value="EmailAddress"></h:outputLabel>
			<h:inputText value="#{userBean.emailAddress}" style="width:200px;">
				<p:ajax event="keyup" update="mess_email"></p:ajax>
			</h:inputText>
		</div>
		<div class="feild-input">
			<h:outputText id="mess_email" style="margin-left:97px;"
				value="#{userBean.messInvaildEmail}"></h:outputText>
		</div>
		<div class="feild-input">
			<h:outputLabel value="Address"></h:outputLabel>
			<h:inputText value="#{userBean.address}" style="width:200px;"></h:inputText>
		</div>
		<div class="feild-input">
			<h:outputLabel value="ServiceSubcribeDate"></h:outputLabel>
			<p:calendar value="#{userBean.serviceSubcribeDate}"></p:calendar>
		</div>
		<div class="feild-input">
			<h:outputLabel value="Months recharge:"></h:outputLabel>
			<p:selectOneRadio value="#{userBean.monthsRecharge}" style="width:200px;">
				<f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
				<f:selectItem itemLabel="2" itemValue="2"></f:selectItem>
				<f:selectItem itemLabel="3" itemValue="3"></f:selectItem>
			</p:selectOneRadio>
		</div>
		<div class="feild-input" style="height: auto;">
			<h:outputLabel value="Package suggested"></h:outputLabel>

			<p:dataTable var="item" styleClass="myTable" style="width:70%;"
				value="#{userBean.listPackages}" rowIndexVar="row">
				<p:column headerText="Stt">
					<h:outputText value="#{row+1}" />
				</p:column>
				<p:column headerText="Name">
					<h:outputText style="float:left;" value="#{item.name}">
					</h:outputText>
				</p:column>
				<p:column headerText="Price">
					<h:outputText style="float:left;" value="#{item.priceStr}">
					</h:outputText>
				</p:column>

				<p:column headerText="Action">
					<h:selectBooleanCheckbox value="#{item.selected}"
						style="float:right;margin-right:10px;margin-top: 6px;"></h:selectBooleanCheckbox>

				</p:column>
			</p:dataTable>

		</div>


		<div class="feild-action"
			style="margin-top: 10px !important; margin-bottom: 10px !important;">
			<p:commandButton id="ok_btn" value="OK" oncomplete="dlg.hide()"
				action="#{userBean.insert}" update=":mainform,:growl"></p:commandButton>

			<p:commandButton value="Cancel" oncomplete="dlg.hide()"></p:commandButton>
		</div>
	</h:panelGroup>


</h:body>
</html>